<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false">
    <a-card
      :body-style="{ padding: '24px 32px' }"
      :bordered="false"
      :tabList="tabList"
      :activeTabKey="activeTabKey"
      @tabChange="
        (key) => {
          this.activeTabKey = key
        }
      "
    >
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item 
          label="摘要"           
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input v-decorator="['description']" placeholder="请输入摘要"/>
        </a-form-item>
        <a-form-item
          label="材料"
          v-show="activeTabKey === '2'"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select
            show-search
            :value="value ? value : undefined"
            :placeholder="`请至少输入一个字符`"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            @search="handleSearch"
            @change="handleChange"
          >
            <a-select-option :value="i.inventoryId" v-for="i in options" :key="i.inventoryId">{{ i.goodName }} {{ i.phoneCode1 }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="业务"
          v-show="activeTabKey === '3'"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select v-decorator="['svBusinessId']" placeholder="请选择业务" @select="selectSvBusiness">
            <a-select-option :value="i.id" v-for="i in businessOptions" :key="i.id">{{ i.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item 
          label="扣款"   
          v-show="dedTyoe === '3'"       
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input addonAfter="元" placeholder="请输入扣款" v-decorator="['deduction', { rules: [{ required: true, message: '请输入扣款' }] }]" />
        </a-form-item>
        <a-form-item 
          label="售价"   
          v-show="activeTabKey !== '1'"       
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input addonAfter="元" placeholder="请输入售价" v-decorator="['price', { rules: [{ required: true, message: '请输入售价' }] }]" />
        </a-form-item>
        <a-form-item 
          label="详细描述"           
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input v-decorator="['detail']" />
        </a-form-item>
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" icon="check">提交</a-button>
          <!-- <a-button style="margin-left: 8px">{{ $t('form.basic-form.form.save') }}</a-button> -->
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { addSvBusClassUsingPOST1,getSvBusinessListUsingPOST } from '@/api/api/shouhouguanli.ts'
import { getInventoryListByPhoneCdeUsingGET } from '@/api/api/pifayewu.ts'

export default {
  name: 'ServiceServiceAddFollow',
  data() {
    return {
      form: this.$form.createForm(this),
      tabList: [
        { key: '1', tab: '文字跟进' },
        { key: '2', tab: '材料跟进' },
        { key: '3', tab: '业务跟进' },
      ],
      dedTyoe:'',
      value:undefined,
      activeTabKey: '1',
      optionParam: {
        pageNo:1,
        pageSize:999,
        queryCondition:'',
        status:'' 
      },
      options:[],
      businessOptions: [],
    }
  },
  mounted() {
    this.getOption()
  },
  methods: {
    handleChange(value) {
      this.value = value
    },
    handleSearch(value) {
      this.handleProd(value)
    },
    handleProd(params) {
      getInventoryListByPhoneCdeUsingGET({
        phoneCodeStr: params,
        status:1,
        storeId: this.$route.query.storeId,
      })
        .then((res) => {
          this.options = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    selectSvBusiness(e){
      this.dedTyoe = this.businessOptions.find((i) => i.id == e).dedType 
    },
    getOption() {
      getSvBusinessListUsingPOST(this.optionParam)
        .then((res) => {
          this.businessOptions = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    // handler
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // recType: this.activeTabKey,
          addSvBusClassUsingPOST1({ ...values,inventoryId:this.value, orderId: this.$route.params.id } )
            .then(() => {
              this.$message.success('操作成功')
              // 重置表单数据
              this.form.resetFields()
              this.$router.back()
            })
            .catch((error) => {
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        }
      })
    },
  },
}
</script>
